<template>
  <div class="xorder-detail-container">
    <Headbar/>
    <MemberHeadMenu />
    <Hungbar/>
    <div class="yh-layout-box mt-20 msg-detail-content" v-if="detail">

      <div class="comments-breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/member/main' }">买家中心</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/member/orders' }">订单中心</el-breadcrumb-item>
          <el-breadcrumb-item>订单：{{ detail.orderNo }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="panel-order-detail">

        <div class="head">
          <h4>订单详情</h4>
        </div>
        <div class="body">
          <div class="status-info">
            <div class="status-bg">

            </div>
            <div class="status fl">
              <!-- 备货中 -->
              <div class="status-info-con" v-if="orderStatus == 9">
                <h5>卖家备货中</h5>
                <div class="order-infoDetail">
                  <p>订单于 {{ detail.updateTime }} 已付款成功，</p>
                  <p>卖家正在备货</p>
                </div>
              </div>

              <!-- 等待卖家审核 -->
              <div class="status-info-con" v-if="orderStatus == 8">
                <h5>等待卖家审核</h5>
                <div class="order-infoDetail">
                  <p>订单于 {{ detail.updateTime }} 提交审核，</p>
                  <p>待卖家审核通过后可支付款项，若有疑问请联系卖家</p>
                </div>
              </div>

              <!-- 待付款 -->
              <div class="status-info-con" v-if="orderStatus == 1">
                <h5 style="margin-top:35px;">等待付款</h5>
                <div class="order-infoDetail">
                  <p>订单于 {{ detail.updateTime }} 审核通过，等待付款。</p>
                  <p>自下单日起<span class="font-mainColor">15</span>天内未付款，系统将自动取消订单。</p>
                </div>
                <a class="status-btn" @click="xorderPay()">立即支付</a>
              </div>

              <!-- 待发货 -->
              <!-- <div class="status-info-con" v-if="orderStatus == 2 && stockStatus == 3">
                <h5 style="margin-top:60px;">等待卖家发货</h5>
                <div class="order-infoDetail">
                  <p>卖家已备货完成，准备发货</p>
                </div>
              </div> -->

              <!-- 待备货、备货中 -->
              <div class="status-info-con" v-if="orderStatus == 2 && detail.stockStatus == 1 || orderStatus == 2 && detail.stockStatus == 2">
                <h5 style="margin-top:60px;">备货中</h5>
                <div class="order-infoDetail">
                  <p>订单于{{ detail.updateTime }}已付款成功，卖家正在备货。</p>
                </div>
              </div>
              <!-- 备货完成 -->
              <div class="status-info-con" v-if="orderStatus == 2 && detail.stockStatus == 3">
                <h5 style="margin-top:60px;">备货完成</h5>
                <div class="order-infoDetail">
                  <p>卖家已备货完成，准备发货。</p>
                </div>
              </div>
              <!-- 待处理 -->
              <div class="status-info-con" v-if="orderStatus == 7">
                <h5>等待处理</h5>
                <div class="order-infoDetail">
                  <p>请填写收货信息，并上传已盖章的协议扫描或照片</p>
                </div>
                <UploadXfile ref="UploadXfile" :orderStatus="orderStatus" :params="detail.orderProtocolItemDTOList"

@getUploadXfile="getUploadXfile" />
              </div>

              <!-- 待收货 -->
              <div class="status-info-con" v-if="orderStatus == 3">
                <h5>卖家已发货，等待收货</h5>
                <div class="order-infoDetail" v-if="logisticsInfo.length > 0">
                  <p>{{ logisticsInfo[0].context }}</p>
                  <p>{{ detail.updateTime }}</p>
                </div>
                <a  @click="dialogLogistics = true">查看物流信息></a>
              </div>

              <!-- 已取消 -->
              <div class="status-info-con" v-if="orderStatus == 6 && detail.cancelStatus != 6">
                <h5>
                  <!-- {{ detail.cancelStatus | filterOrderCancel }} -->
                  订单已取消
                </h5>
                <div class="order-infoDetail">
                  <p>订单于 {{ detail.updateTime }} 取消订单 </p>
                  <!-- <p v-if="detail.cancelStatus == 6">订单于 {{ detail.updateTime }} 由卖家申请退款并取消订单 </p> -->
                </div>
              </div>

              <!-- 已完成 -->
              <div class="status-info-con" v-if="orderStatus == 5">
                <h5 style="margin-top:60px;">已完成</h5>
                <div class="order-infoDetail">
                  <p>订单于 {{ detail.updateTime }} 确认收货</p>
                </div>
              </div>

              <!-- 订单已关闭 -->
              <div class="status-info-con" v-if="orderStatus == 6 && detail.cancelStatus == 6">
                <h5>订单已关闭</h5>
                <div class="order-infoDetail">
                  <p>订单于 {{ detail.updateTime }}</p>
                  <p>卖家审核不通过，已关闭</p>
                </div>
              </div>
            </div>

            <!-- 协议订单状态 -->
            <div class="progress fl">
              <div class="progress-container">
                <el-steps :active="progressActive" :align-center="true" process-status="success" finish-status="success">
                  <el-step :title="item.text" v-for="(item, idx) in stepStatus"></el-step>
                </el-steps>

                <!-- <div class="progress-step-item" v-for="(item, idx) in stepStatus">
                  {{ orderStatus }}
                  {{ item.status }}
                  <div :class="orderStatus == item.status?'progress-step':'progress-step active'">
                    <img v-if="orderStatus == item.status" :src="item.icon">
                    <img v-else :src="item.acitve_icon">
                    <p>{{ item.text }}</p>
                  </div>
                  <div class="step-line" v-if="idx != 6">
                    <img v-if="orderStatus != item.status" src="../../../assets/images/order/line.png">
                    <img v-else src="../../../assets/images/order/line_active.png">
                  </div>
                </div> -->
              </div>
            </div>


          </div>
          <div class="order-info">
            <div class="order-info-wrap">
              <div class="order-info-list">
                <h5 class="order-info-title">
                  收货人信息
                  <a class="fr mr-20" @click="clickShowAddressList" v-if="infoActive && orderStatus == 7">
                    {{ showAddressList?'收起':'修改' }}
                  </a>
                </h5>
                <div class="panel-address-list" v-if="orderStatus == 7 && !addressList.length">
                  <div class="add-address" @click="handleShowDialogAddress()">
                    <img src="@/assets/images/cart/icon-address-add.png" />新增收货信息
                  </div>
                </div>
                <div class="order-infos" v-else>
                  <div class="order-info-item">
                    <div class="info-left">收货人:</div>
                    <div class="info-value" v-if="infoActive">{{ infoActive.consignee }}</div>
                  </div>
                  <div class="order-info-item">
                    <div class="info-left">手机号码:</div>
                    <div class="info-value" v-if="infoActive">{{ infoActive.phone }}</div>
                  </div>
                  <div class="order-info-item">
                    <div class="info-left">地址:</div>
                    <div class="info-value" v-if="infoActive">
                      {{ infoActive.provinceName }}
                      {{ infoActive.cityName }}
                      {{ infoActive.districtName }}
                      {{ infoActive.address }}</div>
                  </div>
                </div>


              </div>

              <div class="order-info-list">
                <h5 class="order-info-title">
                  订单信息
                </h5>
                <div class="order-info-item">
                  <div class="info-left">订单类型:</div>
                  <div class="info-value">协议订单</div>
                </div>
                <div class="order-info-item">
                  <div class="info-left">下单编号:</div>
                  <div class="info-value">{{ detail.orderNo }}</div>
                </div>
                <div class="order-info-item">
                  <div class="info-left">下单时间:</div>
                  <div class="info-value">{{ detail.createTime }}</div>
                </div>
              </div>
              <div class="agreementMsg-list">
                <h5 class="agreementMsg-title">协议信息</h5>
                <div class="agreementMsg-ico" v-if="detail.protocolImgList.length > 0 && judgeFileType(detail.protocolImgList[0].imgUrl) == 'isImage'">
                  <div class="agreementMsg-pic fl" v-for="(item, i) in detail.protocolImgList">
                    <span class="agreement-img">
                      <img class="imageViewer cursor" :src="URL.PIC+item.imgUrl"> <!-- @click="$imageViewer"-->
                    </span>
                  </div>
                </div>

                <a v-else-if="detail.protocolImgList.length > 0 && judgeFileType(detail.protocolImgList[0].imgUrl) == 'isPdf'" target="_blank"
                :href="URL.File+detail.protocolImgList[0].imgUrl"
                 class="agreementMsg-ico tcenter">
                  <span class="agreementMsg-fl-con">
                    <img src="@/assets/images/order/order_deal.png"/>
                    <span class="view-agreement">点击查看协议</span>
                  </span>
                </a>

                <a v-else-if="detail.protocolImgList.length > 0 && judgeFileType(detail.protocolImgList[0].imgUrl) == 'isDoc'" target="_blank"
                :href="URL.downWordFileUrl+URL.File+detail.protocolImgList[0].imgUrl"
                 class="agreementMsg-ico tcenter">
                  <span class="agreementMsg-fl-con">
                    <img src="@/assets/images/order/order_deal.png"/>
                    <span class="view-agreement">点击查看协议</span>
                  </span>
                </a>
                <!-- <div class="agreementMsg-fr-con fl">
                  <p class="agreementMsg-tips">请谨慎阅读协议内容，请上传已盖章的协议扫描件或照片，上传图片最多不超过20张</p>
                  <a class="download-agreement-btn">下载协议</a>
                </div> -->
              </div>
            </div>
          </div>

          <!-- 收货地址列表 start -->
          <div class="address-list" v-if="showAddressList">
            <a class="add-address-new" href="javascript:;" @click="handleShowDialogAddress()">
              <img src="@/assets/images/cart/icon-address-add.png" />新增收货信息
            </a>
            <div class="panel-address-list" v-if="addressList.length">
              <a href="javascript:;" class="btn" @click="handleScrollPage('prev')">
                <img src="@/assets/images/cart/btn-prev-disabled.png" v-if="scrollPage==0" />
                <img src="@/assets/images/cart/btn-prev.png" v-if="scrollPage>0 && scrollPage<scrollMaxPage" />
              </a>
              <div class="address-scroll-wrap">
                <ul :style="{ 'margin-left': scrollWidth }">
                  <li class="item" :class="{'active' : addressActive == index}"
                  v-for="(item, index) in addressList" @click="handleSelectAddress(index)">
                    <div class="title">
                      <strong>{{ item.consignee }}</strong>
                      <b>{{ item.phone }}</b>
                      <span v-if="item.isDefault == 1">默认</span>
                      <a href="javascript:;" @click="handleShowDialogAddress(index)">编辑</a>
                    </div>
                    <div class="info">
                      <p>{{ item.provinceName }} {{ item.cityName }} {{ item.districtName }}</p>
                      <p class="add-info">{{ item.address }}</p>
                    </div>
                    <img src="@/assets/images/cart/icon-checked-arrow.png" class="icon" />
                  </li>
                </ul>
              </div>
              <a href="javascript:;" class="btn" @click="handleScrollPage('next')">
                <img src="@/assets/images/cart/btn-next-disabled.png" v-if="scrollPage==scrollMaxPage-1" />
                <img src="@/assets/images/cart/btn-next.png" v-if="scrollPage>=0 && scrollPage<scrollMaxPage-1" />
              </a>
            </div>
          </div>
          <!-- 收货地址列表 end -->

          <!-- 协议订单列表 start -->
          <div class="order-product">
            <div class="order-pd-company">
              <span>{{ detail.factoryName }}</span>
              <img @click="handleChat" src="../../../assets/images/member/comment_ico02.png">
            </div>
            <div class="msgDetail-table-item">
              <div class="msgDetail-title">
                <p>备货时间：{{ detail.orderProtocolItemDTOList[0].stockupTime }}天
                  <span class="font-red mr-20 ml-10">{{ detail.orderProtocolItemDTOList[0].isExpire }}</span>
                  <span v-if="detail.orderProtocolItemDTOList[0].expireDate">
                    （已延期7天）
                    <el-tooltip content="由于买家有款项逾时未付，卖家已申请延长备货时间，延长时间为7天。" placement="top" effect="light">
                      <el-button class="isexpire-tips">
                        <img src="@/assets/images/xorder/156.png" alt="">
                      </el-button>
                    </el-tooltip>
                  </span>
                  <span class="msgDetail-title-tk ml-10">
                    <el-button v-if="detail.orderProtocolItemDTOList[0].isExpire"
                     size="mini" type="primary" plain @click="xorderTuikuan()">申请退款</el-button>
                    <el-button v-else-if="!detail.orderProtocolItemDTOList[0].isExpire && detail.orderProtocolItemDTOList[0].isShowFefund == 1"
                     size="mini" type="primary" plain @click="xorderTuikuan()">申请退款</el-button>
                  </span>
                </p>
                <p>付款方式：{{ detail.paymentMethods == 1?'全额付款':'分期付款' }}</p>
              </div>

              <div class="msgDetail-table">
                <el-table
                  :data="detail.protocolStagesItemDTOList"
                  border
                  style="width: 100%">
                  <el-table-column
                    prop="stagesNum"
                    label="期数"
                    width="80">
                  </el-table-column>
                  <el-table-column
                    prop="payAmount"
                    label="付款金额"
                    width="120">
                  </el-table-column>
                  <el-table-column
                    label="付款截止时间">

                    <template slot-scope="scope">
                      <span>{{fmtDate(scope.row.cutoffTime, 'ymd')}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="支付时间">
                    <template slot-scope="scope">
                      <span>{{scope.row.payTime?scope.row.payTime:'--'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="支付方式">
                    <template slot-scope="scope">
                      <span v-if="scope.row.payType==1">微信支付</span>
                      <span v-if="scope.row.payType==2">支付宝支付</span>
                      <span v-if="scope.row.payType==0">--</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="状态">
                    <template slot-scope="scope">
                      <span>{{scope.row.payTime?'已支付':'未支付'}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="180" v-if="orderStatus != 7 && orderStatus != 8 && orderStatus != 6">
                    <template slot-scope="scope">
                      <span class="small-text" v-if="scope.row.payTime && scope.row.isSettle == 0">资金已在银行冻结监管</span>
                      <span class="red-text" v-if="scope.row.isExpire && !scope.row.payTime">
                        <span v-if="scope.row.extendDate == 0">已逾期</span>
                        <span v-else-if="scope.row.extendDate == 7">
                          <span>已逾期（已延期7天）</span>
                          <el-tooltip content="由于卖家备货时间已超时，买家已申请延长付款截止时间，延长时间为7天。" placement="top" effect="light">
                            <el-button class="isexpire-tips">
                              <img src="@/assets/images/xorder/156.png" alt="">
                            </el-button>
                          </el-tooltip>
                        </span>
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <span v-if="orderStatus != 7 && orderStatus != 8 && orderStatus != 6">
                        <span v-if="scope.row.payTime">
                          <span v-if="scope.row.isSettle == 1">已结算</span>
                          <span v-if="scope.row.isSettle == 0">
                            <el-button size="mini" type="primary" @click="xorderConfirm(scope.row.stagesOrderNo)" >确定结算</el-button>
                          </span>
                        </span>
                        <span v-else>
                          <div v-if="detail.orderProtocolItemDTOList[0].isExpire && scope.row.isExpire">
                            <el-button size="mini" type="primary" @click="xorderDelayed(scope.row.stagesOrderNo)">延长付款时间</el-button>
                          </div>
                          <div class="mt-10">
                            <el-button size="mini" type="primary" @click="xorderPay()">去支付</el-button>
                          </div>
                        </span>
                      </span>
                      <span v-else>
                        --

                      </span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <!-- 协议订单列表 end -->

          <div class="account-info">
            <div class="account-info-content fr">
              <div class="account-price-list">
                <span class="account-type pay-totalTit">订单总金额：</span>
                <span class="account-values pay-sum">￥{{ detail.amount }}</span>
              </div>
              <div class="account-button fr">

                <span class="cancelBtn" @click="xorderCancelOrder()"  v-if="orderStatus == 7 || orderStatus == 1 || orderStatus == 8">
                  取消订单
                </span>
                <span class="uploadBtn" @click="xorderPay()"  v-if="orderStatus == 1">
                  立即支付
                </span>
                <span class="uploadBtn" @click="confirmReceipt()"  v-if="orderStatus == 3">
                  确定收货
                </span>

                <span class="cancelBtn" @click="xorderIntervene()" v-if="detail.orderProtocolItemDTOList[0].humanIntervention == '' &&  (detail.orderProtocolItemDTOList[0].isShowFefund == 1 || detail.orderProtocolItemDTOList[0].isExpire !='')">
                  申请平台介入
                </span>
                <span class="uploadBtn" @click="xorderNote()"  v-if="orderStatus == 2">
                  提醒发货
                </span>
                <!-- <span class="uploadBtn" @click="clickUploadxfile()">上传协议</span> -->
                <span class="uploadBtn" v-if="xfileList.length > 0" @click="submitAudit()">提交审核</span>
                <!-- <span class="uploadBtn" v-if="orderStatus == 7" @click="submitAudit()">提交审核</span> -->
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <Footbars/>

        <!--新增地址-->
        <el-dialog :title="title" :visible.sync="dialogAddress"
        custom-class="form-dialog-address" width="620px" @close="dialogAddressClose()">
          <el-form :model="formAddress" :rules="rules" ref="formAddress" label-width="120px">
            <el-form-item label="姓名" prop="consignee">
              <el-input v-model="formAddress.consignee" placeholder="请输入收货人姓名" maxlength="25"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="formAddress.phone" placeholder="请输入收货人手机号码" maxlength="11"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" prop="provinceId">
              <SelectArea ref="children" class="no-ver" @changeArea="changeArea" :area="area" />
              <!-- <el-input v-model="formAddress.districtId" autocomplete="off"></el-input> -->
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="formAddress.address" placeholder="如道路、门牌号、楼栋号" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="isDefault" class="checkbox">设为默认地址</el-checkbox>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddress = false">取 消</el-button>
            <el-button type="primary" @click="handleSave()">保 存</el-button>
          </div>
        </el-dialog>

        <!--物流信息-->
        <el-dialog
          title="物流信息"
          :visible.sync="dialogLogistics"
          v-if="logisticsInfo.length"
          width="680px">
          <div class="logistics-info">
            <div class="number">物流公司：{{ logisticsInfo[0].company }}<br/>物流单号：{{ logisticsInfo[0].waybill }}</div>
            <div class="list">
              <div class="item" :class="{'active': index == 0}" v-for="(item, index) in logisticsInfo">
                <div class="icon">
                  <img src="@/assets/images/order/icon-logistics-active.png" v-if="index == 0"/>
                  <img src="@/assets/images/order/icon-logistics.png" v-if="index == logisticsInfo.length-1"/>
                  <i v-if="index>0 && index<logisticsInfo.length-1"></i>
                </div>
                <div class="info">
                  <div class="title">{{ item.context }}<br/>
                  {{ item.ftime }}</div>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogLogistics = false">关闭</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
import Headbar from '@/components/Layouts/Headbar'
import MemberHeadMenu from '../components/MemberHeadMenu';
import Hungbar from '@/components/Layouts/Hungbar'
import Footbars from '@/components/Layouts/Footbars'
import Pagination from '@/components/Pagination'
import { getXOrderDetail, xorderProtocol, xorderCancelOrder,
  orderApplyIntervention, orderConfirmCompletion,orderApplyDelayedPay,
  orderQueryAddress,orderApplyRefund } from '@/api/xorder'
import { getAddressList, addAddress, updateAddress } from '@/api/member'
import { reminderShipment, confirmReceipt, getLogisticsInfo } from '@/api/order'
import SelectArea from '@/components/SelectArea'
import UploadXfile from '@/components/Upload/UploadXfile'

export default {
  name: 'XorderDetail',
  components: {
    Headbar,
    MemberHeadMenu,
    Hungbar,
    Footbars,
    Pagination,
    SelectArea,
    UploadXfile,
  },
  data() {
    const checkMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else {
        if(!/^1\d{10}$/.test(value)){
          callback(new Error('请输入11位手机号码'))
        }else{
          callback();
        }
      }
    }
    return {
      orderStatus: null,
      orderNo: this.$route.params.id,
      dialogLogistics: false,
      logisticsInfo: [],
      stepStatus: [
      //   {
      //   id: 0,
      //   status: 1,
      //   text: '接受邀约',
      //   icon: require('../../../assets/images/order/step_01_active.png'),
      //   acitve_icon: require('../../../assets/images/order/step_01.png')
      // },{
      //   id: 1,
      //   status: 2,
      //   text: '上传协议',
      //   icon: require('../../../assets/images/order/step_02.png'),
      //   acitve_icon: require('../../../assets/images/order/step_02_active.png')
      // },
      {
        id: 1,
        status: 7,
        text: '等待处理',
        icon: require('../../../assets/images/order/step_03.png'),
        acitve_icon: require('../../../assets/images/order/step_03_active.png')
      },
      {
        id: 2,
        status: 8,
        text: '等待审核',
        icon: require('../../../assets/images/order/step_03.png'),
        acitve_icon: require('../../../assets/images/order/step_03_active.png')
      },
      {
        id: 3,
        status: 1,
        text: '待付款',
        icon: require('../../../assets/images/order/step_03.png'),
        acitve_icon: require('../../../assets/images/order/step_03_active.png')
      },
      // {
      //   id: 3,
      //   status: 2,
      //   text: '付款成功',
      //   icon: require('../../../assets/images/order/step_04.png'),
      //   acitve_icon: require('../../../assets/images/order/step_04_active.png')
      // },
      {
        id: 4,
        status: 2,
        stockStatus: 2,
        text: '备货中',
        icon: require('../../../assets/images/order/step_05.png'),
        acitve_icon: require('../../../assets/images/order/step_05_active.png')
      },{
        id: 5,
        status: 2,
        stockStatus: 3,
        text: '备货完成',
        icon: require('../../../assets/images/order/step_05.png'),
        acitve_icon: require('../../../assets/images/order/step_05_active.png')
      },{
        id: 6,
        stockStatus: 3,
        status: 2,
        text: '等待发货',
        icon: require('../../../assets/images/order/step_06.png'),
        acitve_icon: require('../../../assets/images/order/step_06_active.png')
      },{
        id: 7,
        status: 3,
        text: '待收货',
        icon: require('../../../assets/images/order/step_07.png'),
        acitve_icon: require('../../../assets/images/order/step_07_active.png')
      },{
        id: 8,
        status: 5,
        text: '完成',
        icon: require('../../../assets/images/order/step_08.png'),
        acitve_icon: require('../../../assets/images/order/step_08_active.png')
      }],
      tableData: [],
        formAddress: {
          consignee: "",
          phone: "",
          address: "",
          zipCode: "1",
          provinceId: "",
          provinceName: "",
          cityId: "",
          cityName: "",
          districtId: "",
          districtName: ""
        },
        editAddressInfo: '', //编辑地址信息
        area: [],
        detail: null,
        addressList: [],
        dialogAddress: false,
        isDefault: false,
        rules: {
          consignee: [
            { required: true, message: '请输入收货人姓名', trigger: 'blur' }
          ],
          phone: [
            { required: true, validator: checkMobile, trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ],
        },
        infoActive: null,
        xfileList: [],
        scrollPage: 0,
        scrollMaxPage: 0,
        scrollWidth: 0,
        addressActive: 0,
        showAddressList: false,
        progressActive: null,
    }
  },
  watch: {

  },
  created() {
    this.getXOrderDetail();
  },
  methods: {
    //获取订单物流信息
    getLogisticsInfo(waybill) {
      const params = {
        waybill: waybill
      }
      getLogisticsInfo(params).then(res => {
        if(res.code == 200){
          if(res.data.length){
            this.logisticsInfo = res.data
          }
        }
      })
    },
    // 确定收货
    confirmReceipt() {
      confirmReceipt({
        orderNo: this.orderNo
      }).then(res=>{
        this.actionsAfter(res.msg, res.code == 200?'success':'error');
        this.reloadPage(1000)
      })
    },
    // 申请退款
    xorderTuikuan() {
      this.$confirm('是否确定申请退款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderApplyRefund({
          orderId: this.detail.id
        }).then(res=>{
          this.actionsAfter(res.msg, res.code == 200?'success':'error');
          this.reloadPage(1000)
        })
      })


    },
    // 显示隐藏收货地址
    clickShowAddressList() {
      this.showAddressList = !this.showAddressList;
    },
    // 收货地址
    orderQueryAddress(memberAddressId) {
      orderQueryAddress({
        orderNo: this.orderNo,
        memberAddressId: memberAddressId
      }).then(res=>{
        console.log(res)
      })
    },
    // 延迟支付
    xorderDelayed(stagesOrderNo) {
      orderApplyDelayedPay({
        stagesOrderNo: stagesOrderNo
      }).then(res=>{
        this.actionsAfter(res.msg, res.code == 200?'success':'error');
        this.reloadPage(1000)
      })
    },
    // 确定结算
    xorderConfirm(stagesOrderNo){
      this.$confirm('是否确定结算?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        orderConfirmCompletion({
          stagesOrderNo: stagesOrderNo
        }).then(res=>{
          this.actionsAfter(res.msg, res.code == 200?'success':'error');
          this.reloadPage(1000)
        })
      })
    },
    // 提醒发货
    xorderNote() {
      reminderShipment({
        orderNo: this.orderNo,
      }).then(res=>{
        this.actionsAfter(res.msg, res.code == 200?'success':'error')
      })
    },
    // 申请平台介入
    xorderIntervene() {
      orderApplyIntervention({
        orderNo: this.orderNo,
      }).then(res=>{
        this.actionsAfter(res.msg, res.code == 200?'success':'error')
      })
    },
    // 立即支付
    xorderPay() {
      this.$router.push('/meal/cashierOrder?productOrderNo='+this.orderNo+'&orderType=2&stagesNum='+this.detail.stagesOrderNo.split('_')[1])
    },
    // 提交审核
    submitAudit() {
      if(this.xfileList.length == 0){
        this.actionsAfter('请先上传订单协议', 'warning')
        return false
      }else if(!this.infoActive){
        this.actionsAfter('请先添加收货地址', 'warning')
        return false
      }
      const params = {
        memberAddressId: this.infoActive.id,
        orderNo: this.orderNo,
        protocolImgUrlList: this.xfileList
      }
      xorderProtocol(params).then(res=>{
        this.actionsAfter(res.msg, res.code == 200?'success':'error')
        this.reloadPage(1000)
      })
    },
    // 取消订单
    xorderCancelOrder() {
      this.$confirm('是否确定取消订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        xorderCancelOrder({
          orderId: this.detail.id,
          userId: this.getUserInfo().userId,
        }).then(res=>{
          this.actionsAfter(res.msg, res.code == 200?'success':'error')
          this.reloadPage(1000)
        })
      })
    },
    // 点击上传文件
    clickUploadxfile() {
      console.log(this.$refs.UploadXfile)
      this.$refs.UploadXfile.$refs.upload.submit()
    },
    // 提交上传文件
    getUploadXfile(file, fileList) {
      this.xfileList = []
      for (var i in fileList) {
        if(fileList[i].response){
          this.xfileList.push({
            imgUrl: fileList[i].response.data[0],
            imgType: 1,
          })
        }else{
          this.xfileList.push({
            imgUrl: fileList[i].url,
            imgType: 1,
          })
        }
      }
    },
    // 获取协议订单详情
    getXOrderDetail() {
      getXOrderDetail({orderNo: this.orderNo}).then(res=>{
        this.orderStatus = res.data.orderStatus;
        this.detail = res.data;
        // 获取物流信息
        if(res.data.waybill!=null && res.data.waybill!=''){
          this.getLogisticsInfo(res.data.waybill)
        }
        // 显示当前状态进度
        for (var idx in this.stepStatus) {
          if (this.stepStatus[idx].status == this.orderStatus) {
            if(this.detail.orderStatus == 2 && this.detail.stockStatus == 3){
              this.progressActive = 4
            }else if(this.detail.orderStatus == 2 && this.detail.stockStatus == 2 || this.detail.orderStatus == 2 && this.detail.stockStatus == 1) {
              this.progressActive = 3
            }else{
              this.progressActive = parseInt(idx)
            }
          }
        }

        if(this.orderStatus == 7){
          this.getAddressList();
        }else{
          this.infoActive = this.detail.orderAddressDTO;
        }
      })
    },
    // 联系买家提示
    handleChat() {
      this.$message({
        message: '供应商暂未开启客服功能',
        type: 'warning'
      });
    },
    // 地址列表
    getAddressList() {
      getAddressList().then(res => {
        if(res.code == 200){
          this.addressList = res.data;
          if(res.data.length){
            this.scrollMaxPage = Math.ceil(res.data.length/3) //向上取整地址滚动的页数
          }
          for (var idx in this.addressList) {
            if(this.addressList[idx].isDefault == 1){
              this.infoActive = this.addressList[idx];
              // this.orderQueryAddress(this.addressList[idx].id)

            }
          }
        }
      })
    },
    //显示地址弹窗
    handleShowDialogAddress(index) {
      if(index!=undefined){
        this.title = '修改收货信息'
        this.editAddressInfo = this.addressList[index];
        this.isDefault = this.addressList[index].isDefault == 1 ?  true : false;
        for(let i in this.editAddressInfo){
          this.formAddress[i] = this.editAddressInfo[i]
        }
        let provinceId = this.editAddressInfo.provinceId
        let provinceName = this.editAddressInfo.provinceName
        let cityId = this.editAddressInfo.cityId
        let cityName = this.editAddressInfo.cityName
        let districtId = this.editAddressInfo.districtId
        let districtName = this.editAddressInfo.districtName
        this.$nextTick(() => {
          this.area = [
            {
              [provinceId] : provinceName
            },
            {
              [cityId] : cityName
            },
            {
              [districtId] : districtName
            }
          ]
          console.log(this.area)
        });
      }else{
        this.title = '新增收货信息'
      }
      this.dialogAddress = true;
    },
    //关闭地址弹出层
    dialogAddressClose() {
      this.isDefault = false;
      this.formAddress.consignee = ""
      this.formAddress.phone = ""
      this.formAddress.address = ""
      this.formAddress.zipCode = ""

      this.$nextTick(() => {
        this.area = []
      });
     // this.formAddress.consignee = ''
     // this.formAddress.phone = ''
     // this.formAddress.address = ''
    },
    //获取地区
    changeArea(val) {
      let result = []
      if(val.length){
        val.forEach((item, i) => {
          for(let i in item){
            result.push({
              key: i,
              value: item[i]
            })
          }
        })
      };
      this.formAddress.provinceId = result[0].key,
      this.formAddress.provinceName = result[0].value,
      this.formAddress.cityId = result[1].key,
      this.formAddress.cityName = result[1].value,
      this.formAddress.districtId = result[2].key,
      this.formAddress.districtName = result[2].value
    },
    //保存
    handleSave() {
      this.$refs.formAddress.validate((valid) => {
        if (valid) {
          if(this.formAddress.provinceId == ''){
            this.$message({
              type: 'error',
              message: '请选择所在地区'
            });
            return;
          }
          if(this.title == '新增收货信息'){
            this.addAddress()
          }else{
            this.updateAddress()
          }
        } else {
          return false;
        }
      });
    },
    //保存地址
    addAddress() {

      const params = this.formAddress;
      params.isDefault = this.isDefault ? 1 : 0;
      addAddress(params).then(res => {
        this.actionsAfter(res.msg, res.code == 200?'success':'error')
        this.getAddressList();
        this.dialogAddress = false;
      })
    },
    //修改地址
    updateAddress() {
      const params = this.formAddress;
      params.isDefault = this.isDefault ? 1 : 0;
      params.id = this.editAddressInfo.id;
      updateAddress(params).then(res => {
        this.actionsAfter(res.msg, res.code == 200?'success':'error')
        this.getAddressList();
        this.dialogAddress = false;
      })
    },
    //滚动切换地址
    handleScrollPage(dir) {
      if(dir == 'next'){
        if(this.scrollPage>=this.scrollMaxPage-1){
          return;
        }
        this.scrollPage ++;
        this.scrollWidth = - this.scrollPage * 1050 +'px'
      }else{
        if(this.scrollPage<=0){
          return;
        }
        this.scrollPage --;
        this.scrollWidth = - this.scrollPage * 1050 +'px'
      }
    },
    //选中地址
    handleSelectAddress(index) {
      this.addressActive = index;
      // this.orderQueryAddress(this.addressList[index].id)
      this.infoActive = this.addressList[index];
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/pages/confirmOrder.scss';
@import '@/styles/pages/xorderDetail.scss';
.xorder-detail-container{
  .changeArea .area-select.medium{
    margin-left: 0;
  }
  .address-scroll-wrap{
    width: 1020px;
    margin-bottom: 20px;
  }
  .address-scroll-wrap .item{
    width: 278px;
  }
}
.address-list{
  border: 1px solid #ddd;
  padding-top: 15px;
}
.add-address-new{
  text-decoration: none;
  margin-bottom: 15px;
  margin-left: 20px;
  display: block;
  img{
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
  }
}
.msgDetail-title-tk{
  display: inline-block;
}
.msg-detail-content .panel-order-detail .body .order-info .order-info-wrap .agreementMsg-list .agreementMsg-ico{
  height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
}
.small-text{
  font-size: 12px;
  color: #888;
}
.red-text{
  font-size: 12px;
  color: red;
}
</style>
<style lang="scss">
.msgDetail-table{
  .el-table{
    thead th{
      background: #D3E8FB;
      color: #333;
      font-size: 14px;
      text-align: center;
      font-weight: normal;
    }
    tr{
      background: #E6F3FF;
      &:hover{
        td{
          background: #E6F3FF;
        }
      }
      td{
        text-align: center;
      }
    }
  }
}
.xorder-detail-container{
  .el-step__head.is-success,.el-step__title.is-success{
    color: #255B8B;
    border-color: #255B8B;
  }
}
.el-button.isexpire-tips{
  background: none;
  border: none;
  padding: 0;
  img{
    vertical-align: middle;
  }
}

</style>
